<template>
  <div class="container">
    <a-space direction="vertical" :fill="true" :size="16" class="space">
      <a-row class="grid-demo" :gutter="24" justify="space-between">
        <a-col v-for="(i, index) in censusDatas" :key="index" flex="278px">
          <census v-bind="i"></census>
        </a-col>
      </a-row>
      <a-row class="grid-demo" :gutter="24" justify="space-between">
        <a-col :span="24">
          <dataLineChart></dataLineChart>
        </a-col>
      </a-row>
      <a-row class="grid-demo" :gutter="24">
        <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" :xxl="16">
          <exception-message />
        </a-col>
        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
          <seek-help />
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { queryKeyIndicators } from '@/api/dashboard';
  import exceptionMessage from './components/exception-message.vue';
  import seekHelp from './components/seek-help.vue';
  import census from './components/census.vue';
  import dataLineChart from './components/data-line-chart.vue';

  const censusDatas = ref([
    {
      title: '患者总人数',
      total: 0,
      background: {
        'background-color': '#ffb199',
        'background-image': 'linear-gradient(133deg, #ffb199 0%, #ff6188 100%)',
      },
    },
    {
      title: '数据正常人数',
      total: 0,
      background: {
        'background-color': '#04BEFE',
        'background-image': 'linear-gradient(133deg, #04BEFE 0%, #4481EB 100%)',
      },
    },
    {
      title: '数据异常人数',
      total: 0,
      background: {
        'background-color': '#62F5A0',
        'background-image': 'linear-gradient(133deg, #62F5A0 0%, #27AE60 100%)',
      },
    },
    {
      title: '一键求救人数',
      total: 0,
      background: {
        'background-color': '#FFCB70',
        'background-image': 'linear-gradient(133deg, #FFCB70 0%, #FEA937 100%)',
      },
    },
  ]);
  // 获取指标数据
  const initCensus = async () => {
    const { code, data, msg } = await queryKeyIndicators();
    if (code !== 200) {
      Message.error(msg);
      return;
    }
    censusDatas.value[0].total = data[0].totalNum;
    censusDatas.value[1].total = data[0].normalNum;
    censusDatas.value[2].total = data[0].abnormalNum;
    censusDatas.value[3].total = data[0].seekHelpNum;
  };

  initCensus();
</script>

<style lang="less" scoped>
  .container {
    padding-bottom: 0;
    display: flex;
    background-color: var(--color-bg-2);
    padding: 24px;
    .space {
      width: 100%;
    }
    .grid-demo {
      width: 100%;
    }
  }
</style>

<style lang="less" scoped>
  // responsive
  .mobile {
    .container {
      display: block;
      background-color: var(--color-bg-2);
    }
    .right-side {
      // display: none;
      width: 100%;
      margin-left: 0;
      margin-top: 16px;
    }
  }
</style>
